<template>
  <div className="w-full h-[90vh]">
    <router-view />
  </div>
  <Transition name="slide-fade">
    <div className="w-full h-[10vh] bg-slate-700" v-show="config.userTabbar">
      <v-layout class="overflow-visible" className="h-full">
        <v-bottom-navigation
          v-model="curTab"
          :bg-color="color"
          grow
          mode="shift"
          style="height: 100%"
        >
          <v-btn>
            <v-icon :icon="mdiMessage" />
            <span>消息</span>
          </v-btn>

          <v-btn>
            <v-icon :icon="mdiAccountBoxOutline" />
            <span>联系人</span>
          </v-btn>

          <!-- <v-btn>
          <v-icon :icon="mdiSquareRoundedBadgeOutline" />
          <span>动态</span>
        </v-btn> -->
        </v-bottom-navigation>
      </v-layout>
    </div>
  </Transition>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
import {
  mdiMessage,
  mdiAccountBoxOutline,
  // mdiSquareRoundedBadgeOutline,
} from "@mdi/js";
import { computed, onMounted, ref, watch } from "vue";
import { useConfig } from "@/store/localConfig";

const config = useConfig();
const router = useRouter();
const route = useRoute();

const curTab = ref(0);

const color = computed(() => {
  switch (curTab.value) {
    case 0:
      return "blue-grey";
    case 1:
      return "teal";
    case 2:
      return "brown";
    // case 3:
    //   return "indigo";
    default:
      return "blue-grey";
  }
});

watch(curTab, (val, old) => {
  if (val === old) return;
  switch (val) {
    case 0:
      router.push({ name: "chat" });
      break;
    case 1:
      router.push({ name: "friendList" });
      break;
    case 2:
      break;
    default:
      break;
  }
});

onMounted(() => {
  config.userTabbar = true
  switch (route.name) {
    case "chat":
      curTab.value = 0;
      break;
    case "friendList":
      curTab.value = 1;
      break;
    default:
      break;
  }
});
</script>
<style lang="scss">
.slide-fade-enter-active {
  transition: all 0.1s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.1s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
</style>
